<template>
  <a-select v-bind="{ ...parsedProps }" @change="handleChange">
    <a-select-option
      v-for="(option, index) in props.options"
      :key="index"
      :value="option.value"
    >
      {{ option.text }}
    </a-select-option>
  </a-select>
</template>

<script lang="ts">
import { Component, Vue, Prop, Emit } from 'vue-property-decorator'

@Component({})
export default class SelectField extends Vue {
  @Prop() props!: {}
  @Prop() name!: string

  public get parsedProps() {
    // eslint-disable-next-line unicorn/prevent-abbreviations
    const parsedProps: any = {
      ...this.props,
    }
    delete parsedProps.options

    return parsedProps
  }

  @Emit('on-data-change')
  public handleChange(value: string) {
    const fieldName = this.name
    return [fieldName, value]
  }
}
</script>
